<template>
	<view class="">
		<view class="has_discount">
			<view class="list" v-for="(item,index) in discountlist">
				<image src="../../static/image/mine/index/order_discount1.png" mode=""></image>
				<view class="list_content">
					<view class="price">
						<view class="price_p">
							￥<text>{{item.price}}</text>
						</view>
						<view class="price_rule">
							{{item.rule}}
						</view>
					</view>
					<view class="info">
						<view class="info_title">{{item.title}}</view>
						<!-- <view class="info_detail">订单满20元可用</view> -->
						<view class="info_date">{{item.start_time}}-{{item.end_time}}</view>
					</view>
					<view class="touse">
						<view class="btn">
							去使用
							<view class="over_time">仅剩4天</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no_more_discount">
				没有更多优惠券了
			</view>
		</view>
		<view class="nodiscount" >
			<image src="../../static/image/mine/discount/no_discount.png" mode=""></image>
			<view class="nodiscount_detail" @tap="tocenter">
				您当前还没有优惠券！<text>去领券中心</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['discountlist'],
	methods: {
		tocenter () {
			uni.navigateTo({
				url: '/pageD/discount/center'
			})
		}
	}
};
</script>

<style lang="less" scoped>
.list {
	width: calc(100% - 60upx);
	height: 186upx;
	margin: auto;
	margin-top: 20upx;
	position: relative;
	image {
		width: 100%;
		height: 100%;
	}
	.list_content {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		.price {
			width: 210upx;
			height: 140upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// font-size: 32upx;
			// color: #ffffff;
			// text-align: center;
			// line-height: 140upx;
			.price_p {
				font-size: 28upx;
				color: #FFFFFF;
				text {
					font-size: 40upx;
					font-weight: bold;
				}
			}
			.price_rule {
				margin-top: 10upx;
				font-size: 24upx;
				color: #FFFFFF;
				white-space: nowrap;
			}
		}
		.info {
			width: 340upx;
			height: 100%;
			padding: 20upx 0;
			padding-left: 25upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.info_title {
				font-size: 28upx;
				color: #000;
				line-height:28upx;
			}
			.info_detail {
				font-size: 24upx;
				color: #333333;
				line-height: 24upx;
			}
			.info_date {
				margin-top: 20upx;
				font-size: 24upx;
				color: #333333;
				line-height: 24upx;
			}
		}
			.touse {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				height: 100%;
				.btn {
					position: relative;
					width: 144upx;
					height: 52upx;
					border-radius: 26upx;
					// background: linear-gradient(to right, #f73e2f 0%, #fc5b2f 100%);
					background: linear-gradient(to right, #fe7b71 0%,#f73e2f 100%);
					// box-shadow: 0 0 10upx 0 #fc5b2f;
					font-size: 24upx;
					color: #ffffff;
					text-align: center;
					line-height: 52upx;
					.over_time {
						position: absolute;
						right: 0;
						top: -60upx;
						font-size: 24upx;
						color: #f73e2f;
					}
				}
			}
		.getdiscount {
			width: 120upx;
			// background-color: #f73e2f;
			background: linear-gradient(to right, #fe7b71 0%,#f73e2f 100%);
			height: 40upx;
			border-radius: 20upx;
			text-align: center;
			line-height: 40upx;
			color: #FFFFFF;
			font-size: 24upx;
		}
	}
}
.no_more_discount {
	margin-top: 30upx;
	font-size: 28upx;
	color: #999999;
	text-align: center;
}
.nodiscount {
	text-align: center;
	image {
		display: block;
		margin: auto;
		width: 240upx;
		height: 200upx;
	}
	.nodiscount_detail {
		margin-top: 50upx;
		font-size: 24upx;
		color: #999999;
		text {
			color: #f73e2f;
			text-decoration:underline;
		}
	}
}
</style>
